<template>
  <div class="registe-main">
    <!--公司信息-->
    <div class="company">
      <span style="font-size: 30px">{{$t('register.company')}}</span>
      <div class="company-detail">
        <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row ">
          <div style="width:350px;height:75px;">
            <span style="color:#FF5F58;font-size: 6px">*</span>
            <span style="font-size: 12px;font-weight: 500;color:#4A4A4A">{{$t('register.companyName')}}</span>
            <input type="text" id="company" name="company" class="input-max" maxlength="100"
                   v-model="company" autofocus/>
          </div>
          <div style="width:211px;height:75px;margin-left:52px;" class="detail-select">
            <span style="color:#FF5F58;font-size: 6px">*</span>
            <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.country')}}</span>
            <el-select v-model="countryItem" placeholder="" style="width: 350px;height: 50px"
                       @change="showCountry(countryItem)" id="country">
              <el-option
                v-for="item in myCountries"
                :key="get(item)"
                :label="get(item)"
                :value="JSON.stringify(item)"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="width:805px;height:75px;margin:28px 45px; display:flex;flex-direction: row " id="mydiv"
             v-if="this.showCities">
          <div style="width:105px;height:75px;" class="detail-select">
            <span style="color:#FF5F58;font-size: 6px">*</span>
            <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.location')}}</span>
            <el-select v-model="provinceItem" placeholder="" style="width: 105px;" @change="select(provinceItem)"
                       id="province">
              <el-option
                v-for="item2 in province"
                :key="item2.province"
                :label="item2.province"
                :value="JSON.stringify(item2)"
              >
              </el-option>
            </el-select>
          </div>
          <div style="width:105px;height:75px;margin:18px 16px;" class="detail-select">
            <el-select v-model="cityItem" placeholder="" style="width: 105px;" @change="getArea(cityItem)">
              <el-option
                v-for="item3 in cities"
                :key="item3.city"
                :label="item3.city"
                :value="JSON.stringify(item3)"
              >
              </el-option>
            </el-select>
          </div>
          <div style="width:105px;height:75px;margin:18px 16px;" class="detail-select">
            <el-select v-model="countyName" placeholder="" style="width: 105px" @change="getLevelCity">
              <el-option
                v-for="item4 in areas"
                :key="item4.area"
                :label="item4.area"
                :value="item4.area"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row;margin-top: 28px "
             id="addDiv">
          <div style="width:350px;height:75px;">
            <span style="color:#FF5F58;font-size: 6px">*</span>
            <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.address')}}</span>
            <input type="text" id="address" name="company" class="input-max" maxlength="100"
                   v-model="address">
          </div>
          <div style="width:211px;height:75px;margin-left:52px;">
            <span style="color:#FF5F58;font-size: 6px">*</span>
            <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.fixedPhone')}}</span>
            <input id="fixedPhone" type="text" name="company" class="input-max" maxlength="100"
                   v-model="fixed">
          </div>
        </div>
      </div>
      <!--联系人信息-->
      <div class="contacts">
        <span style="font-size: 30px">{{$t('register.contacts')}}</span>
        <div class="contacts-detail">
          <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row ">
            <div style="width:350px;height:75px;">
              <span style="color:#FF5F58;font-size: 6px">*</span>
              <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.contactsName')}}</span>
              <input type="text" id="name" name="company" class="input-max" maxlength="100"
                     v-model="contacts">
            </div>
            <div style="width:350px;height:75px;margin-left:52px;">
              <span style="color:#FF5F58;font-size: 6px">*</span>
              <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.position')}}</span>
              <input type="text" id="position" name="company" class="input-max" maxlength="100"
                     v-model="position">
            </div>
          </div>
          <div style="width:805px;height:75px;margin:21px 45px; display:flex;flex-direction: row ">
            <div style="width:350px;height:75px;">
              <span style="color:#FF5F58;font-size: 6px">*</span>
              <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.email')}}</span>
              <input type="text" id="email" name="company" class="input-max" maxlength="100"
                     v-model="target">
            </div>
            <div style="width:211px;height:75px;margin-left:52px;">
              <span style="color:#FF5F58;font-size: 6px">*</span>
              <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.emailVail')}}</span>
              <input type="text" id="emailVail" name="company" class="input-max" maxlength="100"
                     style="width:219px" v-model="emailCode">
            </div>
            <div class="input-email" style="width: 116px;height: 51px;margin:24px 24px">
              <button class="btn-sub"
                      style="width: 116px;height:51px;font-size: 12px;background-color:#007AFF;border-radius: 5px; border: none;color: #FFFFFF;font-family: PingFangSC-Medium"
                      @click="send" id="mybtn">{{$t('register.getEmailVail')}}{{getEmailVail}}
              </button>
            </div>
          </div>
          <div style="width:805px;height:75px;margin:28px 45px; display:flex;flex-direction: row ">
            <div style="width:350px;height:75px;margin-top: 2px">
              <span style="color:#FF5F58;font-size: 6px">*</span>
              <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.phone')}}</span>
              <input type="text" id="phone" name="company" class="input-max" maxlength="100"
                     style="width:350px;" v-model="phone">
            </div>
            <div style="width:219px;height:75px;margin-left: 54px;">
              <span style="color:#FF5F58;font-size: 6px">*</span>
              <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.vailCode')}}</span>
              <input type="text" id="vailCode" name="company" class="input-max" maxlength="100"
                     style="width:219px;" v-model="vailCode">
            </div>
            <div id="v_container" style="width: 116px;height: 51px;margin:24px 18px"></div>
          </div>
          <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row ">
            <div style="width:350px;height:75px;">
              <span style="color:#FF5F58;font-size: 6px">*</span>
              <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.bussEmail')}}</span>
              <input type="text" id="bussEmail" name="company" class="input-max" maxlength="100"
                     v-model="busEmail">
            </div>
          </div>
        </div>
        <!--提交按钮-->
        <div class="certificate"
             style="height:17px;margin: 58px auto;display:flex;flex-direction:row;justify-content: center">
          <el-checkbox v-model="checked" id="select-ok"></el-checkbox>
          <label style="font-size: 11px;font-family: PingFangSC-Regular;color:#4A4A4A ;margin-left: 10px;">{{$t('register.read')}}</label>
          <span class="state"
                style="font-size: 11px;font-family: PingFangSC-Regular;color: #007AFF;text-decoration: none;margin-left: 5px"
                @click="showStatement">{{$t('register.certificate')}}</span>
        </div>
        <div style="width:850px;height:120px;margin-top: -50px;text-align: center">
          <button class="btn-sub" @click="save"
                  style="width: 800px;height:60px;font-size: 18px;background-color:#007AFF;border-radius: 25px; border: none;color: #FFFFFF;font-family: PingFangSC-Medium">
            {{$t('register.submit')}}
          </button>
        </div>
      </div>
    </div>
    <!--消息框-->
    <div id="tips" class="tips" :hidden='tips'>
      <img :src="resultIcon" @dragstart="imgdragstart"/>
      <span>{{msg}}</span>
    </div>
  </div>
</template>

<script>
  import ajax from '../../common/ajax'
  import api from '../../common/api'

  let verifyCode
  let test
  let language
  export default {
    name: "Register",
    data() {
      return {
        myCountries: [],
        province: [],
        cities: [],
        areas: [],
        target: '',
        culture: 'zh-cn',
        company: '',
        country: '',
        location: '',
        address: '',
        fixed: '',
        contacts: '',
        position: '',
        emailCode: '',
        phone: '',
        busEmail: '',
        cansubmit: true,
        canSendCode: true,
        timer: null,
        times: 0,
        iso: 'CN',
        showCities: false,
        provinceItem: '',
        provinceName: '',
        cityItem: '',
        cityName: '',
        countyName: '',
        resultIcon: '',
        msg: '',
        tips: true,
        getEmailVail: '',
        vailCode: '',
        checked: false,
        countryItem: ''
      }
    },
    created() {
      language = this.$route.query.culture
    },
    mounted() {
      getCountries(this)
      getProvinces(this)
      verifyCode = new GVerify("v_container")
      console.log(verifyCode.options.code)
      new QWebChannel(qt.webChannelTransport, function (channel) {
        test = channel.objects.Js2QtFunction;
      });
    },
    methods: {
      imgdragstart(e) {
        e.preventDefault()
      },

      showStatement() {
        if (language === 'zh-cn') {
          this.$router.push({
            path: '/statement',
            query: {
              culture: language
            }
          })
        } else if (language === 'en-us') {
          this.$router.push({
            path: '/statementEng',
            query: {
              culture: language
            }
          })
        }
      },
      /**
       * 选取国家
       */
      showCountry(item) {
        console.log(JSON.parse(item).nameZh)
        console.log(language)
        if (language === 'zh-cn') {
          this.country = JSON.parse(item).nameZh
        } else if (language === 'en-us') {
          this.country = JSON.parse(item).name
        }
        console.log(this.country)

        if (language === 'zh-cn' && JSON.parse(item).id === 44) {
          this.showCities = true
        } else {
          this.showCities = false
        }
        this.iso = JSON.parse(item).iso
        console.log(this.iso)


      },

      /**
       * 选择省份
       */
      select(item2) {
        getCities(this, JSON.parse(item2).provinceid)
        this.provinceName = JSON.parse(item2).province
        console.log(this.provinceName)
        this.cityItem=""
        this.countyName=""
      },

      /**
       * 选择地级市
       */
      getArea(item3) {
        getCounty(this, JSON.parse(item3).cityid)
        this.cityName = JSON.parse(item3).city
        console.log(this.cityName)
        this.countyName=""
      },

      /**
       * 选择县级市
       */
      getLevelCity() {
        console.log(this.countyName)
      },

      /**
       * 发送验证码
       */
      send: function () {
        let that = this
        if (this.target === "") {
          this.msg = (language === 'zh-cn' ? '请输入注册邮箱' : 'Please enter email address')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("email").focus()
        } else {
          getEmailCode(this)

        }
      },

      /**
       * 提交申请
       */
      save: function () {
        let that = this
        this.location = this.provinceName + this.cityName + this.countyName
        let Jsons = {
          company: this.company,
          country: this.country,
          address: this.address,
          fixed: this.fixed,
          contacts: this.contacts,
          position: this.position,
          emailCode: this.emailCode,
          phone: this.phone,
          email: this.target,
          culture: this.culture,
          busEmail: this.busEmail,
          location: this.location,
          iso: this.iso
        }

        if (this.company === "") {
          this.msg = (language === 'zh-cn' ? '请填写公司名称' : 'Fill in Company Name！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("company").focus()
        } else if (this.country === "") {
          this.msg = (language === 'zh-cn' ? '请选择国家！' : 'Please select country！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("country").focus()
        } else if (this.country === "中国" && (this.provinceName === "" || this.cityName === "" || this.countyName === "")) {
          this.msg = (language === 'zh-cn' ? '请选择完整的公司所在地！' : 'Select Location！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("province").focus()
        } else if (this.address === "") {
          this.msg = (language === 'zh-cn' ? '请输入公司地址！' : 'Fill in Address！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("address").focus()
        } else if (this.fixed === "") {
          this.msg = (language === 'zh-cn' ? '请输入固定电话！' : 'Please input the fixed telephone！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("fixedPhone").focus()
        } else if (this.contacts === "") {
          this.msg = (language === 'zh-cn' ? '请输入联系人姓名！' : 'Fill in Contact Info！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("name").focus()
        } else if (this.position === "") {
          this.msg = (language === 'zh-cn' ? '请输入职位！' : 'Please enter the position！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("position").focus()
        } else if (this.target === "") {
          this.msg = (language === 'zh-cn' ? '请输入邮箱地址！' : 'Fill in Email Address！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("email").focus()
        } else if (this.target.indexOf('@') == -1) {
          this.msg = (language === 'zh-cn' ? '邮箱格式错误！' : 'Wrong Email Format！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("email").focus()
        } else if (this.emailCode === "") {
          this.msg = (language === 'zh-cn' ? '请输入邮箱验证码！' : 'Fill in Email Verification Code！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("emailVail").focus()
        } else if (this.phone === "") {
          this.msg = (language === 'zh-cn' ? '请输入手机号！' : 'Fill in Phone Number！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("phone").focus()
        } else if (this.vailCode !== verifyCode.options.code) {
          this.msg = (language === 'zh-cn' ? '安全验证码错误！' : 'Wrong Validation Code！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("vailCode").focus()
        } else if (this.busEmail === "") {
          this.msg = (language === 'zh-cn' ? '请填写商务邮箱地址！' : 'Fill in Work Email Address！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("bussEmail").focus()
        } else if (this.busEmail.indexOf('@') == -1) {
          this.msg = (language === 'zh-cn' ? '商务邮箱地址格式错误！' : 'Wrong Work Email Format！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("bussEmail").focus()
        } else if (this.checked === false) {
          this.msg = (language === 'zh-cn' ? '请同意服务协议！' : 'Agree to Terms of Service！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        } else {
          this.cansubmit = false
          saveData(this, Jsons, test)
        }
      },

      /**
       * 国家中英文转换
       */
      get(item) {
        if (language === 'en-us') {
          return item.niceName
        } else {
          return item.nameZh
        }
      }
    }
  }

  //获取国家信息
  function getCountries(that) {
    ajax.get({
      url: api.countries.routeName + '?r=' + Math.random(),
      success: function (res) {
        that.myCountries = res
        console.log(res)
      }
    })
  }

  //获取省份
  function getProvinces(that) {
    ajax.get({
      url: api.provinces.routeName + '?r=' + Math.random(),
      success: function (res) {
        that.province = res
      }
    })
  }

  //获取对应省份下的市
  function getCities(that, provinceid) {
    ajax.get({
      url: api.cities.routeName + '?pid=' + provinceid,
      success: function (res) {
        that.cities = res
      }
    })
  }

  //获取对应地级市下的县级市
  function getCounty(that, cityid) {
    ajax.get({
      url: api.counties.routeName + '?cid=' + cityid,
      success: function (res) {
        that.areas = res
      }
    })
  }

  //获取邮箱验证码
  function getEmailCode(that) {
    ajax.get({
      url: api.emailCode.routeName + '?target=' + that.target + '&culture=' + that.culture,
      success: function (res) {
        if (res === -1) {
          that.msg = '邮箱已经被注册！'
          that.resultIcon = require('../../assets/images/icon_error.png')
          that.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        } else if (res === -2) {
          that.msg = '邮箱验证码已经发送！'
          that.resultIcon = require('../../assets/images/icon_error.png')
          that.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        } else if (res === 0) {
          //发送验证码倒计时
          let count = 60
          document.getElementById("mybtn").style.background = "grey"
          that.getEmailVail = count + 's'
          that.canSendCode = false
          if (!that.timer) {
            that.times = count
            that.timer = setInterval(() => {
              if (that.times > 0 && that.times <= count) {
                that.times--
                document.getElementById("mybtn").setAttribute("disabled", "disabled")

                that.getEmailVail = '(' + that.times + 's)'
              } else {
                that.canSendCode = true
                clearInterval(this.timer)
                document.getElementById("mybtn").removeAttribute("disabled")
                document.getElementById("mybtn").style.background = '#007AFF'
                that.getEmailVail = ''
                that.timer = null
              }
            }, 1000)
          }

          that.msg = '邮箱验证码发送成功！'
          that.resultIcon = require('../../assets/images/ico_success.png')
          that.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        }
        console.log(res)
      }
    })
  }

  //提交申请
  function saveData(that, Jsons, test) {
    console.log(Jsons)
    ajax.postFormData({
      url: api.register.routeName + '?r=' + Math.random(),
      data: Jsons,
      success: function (res) {
        console.log(res)
        if (res === 1) {
          that.msg = (language === 'zh-cn' ? '注册成功！' : 'Register Success！')
          that.resultIcon = require('../../assets/images/ico_success.png')
          that.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)

          test.useFunction_Close(false)
          that.cansubmit = true
        } else if (res === -1) {
          that.msg = (language === 'zh-cn' ? '邮箱验证码错误！' : 'Verification code error！')
          that.resultIcon = require('../../assets/images/icon_error.png')
          that.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        } else if (res === -2) {
          that.msg = (language === 'zh-cn' ? '数据库保存异常！' : 'Database save exception ！')
          that.resultIcon = require('../../assets/images/icon_error.png')
          that.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        } else if (res === 0) {
          that.msg = (language === 'zh-cn' ? '注册失败！' : 'Register Fail ！')
          that.resultIcon = require('../../assets/images/icon_error.png')
          that.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        }
      },
    })
  }

  // var verifyCode = new GVerify("v_container");
</script>

<style>
  html, body {
    margin: 0;
    padding: 0;
  }

  .company, .contacts {
    width: 850px;
    height: 402px;
    margin: 50px auto;
  }

  .company-detail, .contacts-detail {
    width: 850px;
    background: #E5E5E5;
    background: rgba(0, 0, 0, 0.02);
    margin-top: 13px;
    padding-top: 17px;
    border-radius: 10px;
  }

  .company-detail {
    padding-bottom: 37px;
  }

  .contacts-detail {
    height: 420px;
  }

  .input-max, .select-221 {
    width: 348px;
    height: 49px;
    border: 1px solid #7E7E7E;
    border-radius: 5px;
    margin-top: 6px;
    background-color: #FFFFFF;
  }

  .select-221 {
    width: 211px;
    height: 51px;
    padding-left: 20px;
    font-size: 16px;
    font-family: PingFangSC-Regula;
    color: #4A4A4A
  }

  option {
    font-size: 16px;
    color: #7E7E7E;
    font-weight: 500;
  }

  .btn-sub:hover {
    cursor: pointer;
  }

  input {
    text-indent: 15px;
  }

  .tips {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.30);
    border-radius: 5px;
    position: fixed;
    top: 0;
    left: 40%;
    width: auto;
    height: 65px;
    z-index: 99;
  }

  .tips img {
    width: 30px;
    height: 30px;
    position: relative;
    margin-top: 18px;
    margin-left: 66px;
  }

  .tips span {
    font-size: 15px;
    color: #3C3C3C;
    letter-spacing: -0.05px;
    line-height: 16px;
    display: inline-block;
    position: relative;
    top: -8px;
    margin-left: 13px;
    padding-right: 66px;
  }

  .detail-select .el-input__inner {
    height: 50px;
    border-color: #7E7E7E;
    margin-top: 5px;
  }

  .state:hover {
    cursor: pointer;
  }
</style>
